<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // slot 插槽
    // slot中使用的数据,作用域的问题
    // 父模板里调用的数据属性,使用的都是父模板里的数据
    // 子模板路调用的数据属性,使用的都是子模板里的数据
    // const app = Vue.createApp({
    //     data(){
    //         return{
    //             text:'提交',
    //         }
    //     },
    //     template:`
    //     <myform>
    //         <div>{{text}}</div>
    //     </myform>
    //     <myform>
    //         <button>{{text}}</button>
    //     </myform>
    //     `
    // });
    // app.component('myform',{
    //     methods:{
    //         handleClick(){
    //            alert(123);
    //         }
    //     },
    //     template:`
    //     <div>
    //         <input />
    //         <span @click="handleClick">
    //             <slot></slot>  
    //         </span>
    //     </div>
    //     `
    // })
    // const vm = app.mount('#root')

    // 具名插槽
    const app = Vue.createApp({
        template:`
        <layout>
            <template v-slot:header>
                <div>header</div>    
            </template>
            <template v-slot:footer>
                <div>footer</div>    
            </template>
        </layout>
        `
    });
    app.component('layout',{
        template:`
        <div>
            <slot name="header"></slot>
            <div>content</div>
            <slot name="footer"></slot>
        </div>
        `
    })
    const vm = app.mount('#root')
</script>